<template>
  <el-dialog :model-value="dialogVisible" width="500px" align-center @closed="handleCancel">
    <template #header>
      <div class="title-wrap">
        <div class="title">新建流程</div>
        <div class="tip">* 流程创建并部署后名称和编号不可修改</div>
      </div>
    </template>
    <el-form ref="refForm" :model="form.data" :rules="form.rules" label-width="80px" label-position="right">
      <el-form-item prop="name" label="流程名称">
        <el-input v-model="form.data.name" placeholder="请输入流程名称" @change="onChangeName"></el-input>
      </el-form-item>
      <el-form-item prop="key" label="流程编号">
        <el-input v-model="form.data.key" placeholder="请输入流程编号" @input="onInput"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保 存</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { withDefaults, computed, reactive, ref } from 'vue'
import { ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import { pinyin } from 'pinyin-pro'
import { flowDefApi } from '@/api/modules/flow/flowDef'

const props = withDefaults(defineProps<{ visible: boolean }>(), {
  visible: false
})
const emits = defineEmits(['success', 'update:visible'])

const dialogVisible = computed(() => props.visible)

const refForm = ref()

const checkKey = async (rule: any, value: any, callback: any) => {
  if (value) {
    const resp = await flowDefApi.checkKey(value)
    if (resp.success && !resp.data) {
      callback()
    } else {
      callback(new Error('流程编号已存在'))
    }
  } else {
    callback()
  }
}
const checkName = async (rule: any, value: any, callback: any) => {
  if (value) {
    const resp = await flowDefApi.checkName(value)
    if (resp.success && !resp.data) {
      callback()
    } else {
      callback(new Error('流程名称已存在'))
    }
  } else {
    callback()
  }
}

const form = reactive({
  data: {} as any,
  rules: {
    name: [
      { required: true, message: '请输入流程名称' },
      { validator: checkName, trigger: 'blur' }
    ],
    key: [
      { required: true, message: '请输入流程编号' },
      { validator: checkKey, trigger: 'blur' }
    ]
  },
  inputKey: false
})

const onInput = () => {
  form.inputKey = true
}
const onChangeName = () => {
  if ((!form.inputKey || !form.data.key) && form.data.name) {
    if (form.data.name.length > 2) {
      form.data.key = `${pinyin(form.data.name.substring(0, 2), { toneType: 'none' })}${pinyin(
        form.data.name.substring(2),
        { toneType: 'none', pattern: 'first' }
      )}`
    } else {
      form.data.key = pinyin(form.data.name, { toneType: 'none' })
    }
    form.data.key = form.data.key.replace(/ /g, '')
  }
}
const handleSave = () => {
  refForm.value.validate((valid: boolean) => {
    if (valid) {
      //todo 验证编号名称是否重复
      const data = { ...form.data }
      refForm.value.resetFields()
      emits('success', data)
      emits('update:visible', false)
    }
  })
}

const handleCancel = () => {
  refForm.value.resetFields()
  emits('update:visible', false)
}
</script>

<style lang="scss" scoped>
.title-wrap {
  display: flex;
  align-items: end;
  gap: 20px;
}
.title {
  line-height: var(--el-dialog-font-line-height);
  font-size: var(--el-dialog-title-font-size);
  color: var(--el-text-color-primary);
}
.tip {
  font-size: $--size-font-small;
  color: $--color-danger;
  font-weight: bold;
}
</style>
